<template>
    <div>
        <el-row>
            <el-tabs v-model="activeTab" type="border-card">
                <el-tab-pane v-for="(type, index) in fetchType" :key="index" :label="type.label" :name="type.value">

                </el-tab-pane>
            </el-tabs>
        </el-row>
        <div class="tab-content">
            <div class="grab-time">上次抓取时间: <span>{{ lastGrabTime }}</span></div>
            <div class="grab-status">上次抓取状态: <span>{{ lastGrabStatus }}</span></div>
        </div>
        <div>
            <el-form :inline="true" :model="formInline" ref="cfgForm">
                <el-form-item label="定时抓取间隔:" prop="grabInterval" :rules="[
                    { required: true, message: '不能为空', trigger: 'blur' },
                    { pattern: /\d+/, message: '必须为数字', trigger: 'blur' }
                ]">
                    <el-input v-model="formInline.grabInterval" style="width:80px;"></el-input>
                    <span style="margin-right:5px; ">分钟</span>
                </el-form-item>
                <el-form-item label="启用抓取:">
                    <el-switch v-model="formInline.enable" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="handleAdd" style="margin-bottom:10px;">新增</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" :key="activeTab" :header-cell-style="headerStyleEvent">
            <el-table-column prop="ftpResultPath" :label="`${AHCSNCType}结果的ftp路径`" align="center"></el-table-column>
            <el-table-column prop="lastGrabResult" label="上次抓取结果" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.lastGrabResult ? '成功' : '失败' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180px">
                <template slot-scope="{row}">
                    <el-button size="mini" type="text" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="mini" type="text" style="color:#f56c6c" @click="handleDeleate(row)">删除</el-button>
                    <el-button size="mini" type="text" style="color:#f51209"
                        @click="handleResetFtpProgress(row)">重置进度时间</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="isEdit ? '编辑路径' : '新增路径'" :visible.sync="DialogShow" width="530px" @close="resetForm">
            <el-form ref="Form" :model="form" label-width="80px" :rules="Rules">
                <el-form-item label="ftp路径" prop="ftpResultPath">
                    <el-input v-model="form.ftpResultPath"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancelConfig()">取 消</el-button>
                <el-button type="primary" @click="isEdit ? handleUpdateConfig() : handleAddConfig()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { FeachGetAHCSNCType, FeachAHCSNCConfig, FeachAHCSNCFtpPathAdd, FeachAHCSNCFtpPathUpdate, FeachAHCSNCFtpPathDel, FeachAHCSNCFtpPathRsetProgress } from '@/network/linemachine'

export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            activeTab: 'AHC抓取',
            AHCSNCType: '',
            lastGrabTime: '',
            lastGrabStatus: '',
            formInline: {
                grabInterval: '',
                enable: false
            },
            form: {
                ftpResultPath: ''
            },
            Rules: {
                ftpResultPath: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    // ipv4格式ftp
                    { pattern: /^ftp:\/\/((2[0-4]\d|25[0-5]|1\d\d|[1-9]\d|\d)\.){3}(2[0-4]\d|25[0-5]|1\d\d|[1-9]\d|\d)(:[1-9]\d{0,4})?(\/.*)?$/, message: '请输入正确的ip形式ftp路径', trigger: 'blur' },
                ]
            },
            isEdit: false,
            tableData: [],
            DialogShow: false,
            fetchType: [{
                value: 'AHC抓取',
                label: 'AHC抓取'
            }, {
                value: 'SNC抓取',
                label: 'SNC抓取'
            }]
        }
    },
    mounted() {
        this.getAHCSNCData()
    },
    watch: {
        activeTab(newVal) {
            this.getAHCSNCData(newVal)
        }
    },
    methods: {
        async getAHCSNCData() {
            try {
                if (this.activeTab === 'AHC抓取') {
                    this.AHCSNCType = 'AHC'
                    const res = await FeachGetAHCSNCType({ AHCSNCType: this.AHCSNCType })
                    this.lastGrabTime = res.data?.lastGrabTime
                    this.lastGrabStatus = res.data?.lastGrabStatus
                    this.formInline.grabInterval = res.data?.grabInterval
                    this.formInline.enable = res.data?.enable
                    this.tableData = res.data?.grabResultInfo

                } else if (this.activeTab === 'SNC抓取') {
                    this.AHCSNCType = 'SNC'
                    const res = await FeachGetAHCSNCType({ AHCSNCType: this.AHCSNCType })
                    this.lastGrabTime = res.data?.lastGrabTime
                    this.lastGrabStatus = res.data?.lastGrabStatus
                    this.formInline.grabInterval = res.data?.grabInterval
                    this.formInline.enable = res.data?.enable
                    this.tableData = res.data?.grabResultInfo
                }
            } catch (error) {
                console.log(error)
            }
        },
        handleEdit(row) {
            this.form = {
                oldFtpResultPath: row.ftpResultPath,
                ftpResultPath: row.ftpResultPath
            }
            this.isEdit = true
            this.DialogShow = true
        },
        async handleDeleate(row) {

            try {
                await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                const res = await FeachAHCSNCFtpPathDel({ ftpResultPath: row.ftpResultPath }, this.AHCSNCType)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getAHCSNCData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        async handleResetFtpProgress(row) {

            try {
                await this.$confirm('确定重置当前ftp解析时间的进度?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                const res = await FeachAHCSNCFtpPathRsetProgress({ ftpResultPath: row.ftpResultPath }, this.AHCSNCType)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '成功!'
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleAdd() {
            this.form = {
                ftpResultPath: ''
            }
            this.isEdit = false
            this.DialogShow = true
        },
        async handleAddConfig() {
            try {
                await this.$refs['Form'].validate()
                const res = await FeachAHCSNCFtpPathAdd(this.form, this.AHCSNCType)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                    this.form.ftpResultPath = '';
                }
            } catch (error) {
                console.log(error);
            }
        },
        async handleUpdateConfig() {
            try {
                await this.$refs['Form'].validate()
                const res = await FeachAHCSNCFtpPathUpdate({
                    oldFtpResultPath: this.form.oldFtpResultPath,
                    newFtpResultPath: this.form.ftpResultPath
                }, this.AHCSNCType)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        async handleSave() {
            try {
                await this.$refs['cfgForm'].validate()
                const res = await FeachAHCSNCConfig(this.formInline, this.AHCSNCType)
                console.log(res);
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                }
                else {
                    this.getAHCSNCData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        headerStyleEvent() {
            return { background: '#eef1f6', color: '#606266' }
        },
        resetForm() {
            this.$refs['Form'].resetFields();
            this.getAHCSNCData();
        },
        handleCancelConfig() {
            this.DialogShow = false;
        }
    }
}
</script>

<style scoped>
.tab-content {
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.grab-time,
.grab-status {
    font-size: 14px;
    margin: 8px 0;
    color: #333;
}

.grab-time span,
.grab-status span {
    font-weight: bold;
    color: #409eff;
}

.demo-form-inline {
    margin-top: 20px;
}

.form-item {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}
</style>
